<template>
  <div class="yiqing">
    <div class="name">国内疫情</div>
    <div class="yiqingTime">更新至{{yiqingList.time}}</div>	
    <div class="yiQing1">
      <div class="yiqingcontent">
        <div class="yiqingName">新增确诊</div>
        <div class="yiqingNum" style="color:#ff6a57;">{{yiqingList.qz.add}}</div>
      </div>
      <div class="yiqingcontent">
        <div class="yiqingName">新增本土</div>
        <div class="yiqingNum" style="color:#ff6a57;">{{yiqingList.bt.add}}</div>
      </div>
      <div class="yiqingcontent">
        <div class="yiqingName">新增境外</div>
        <div class="yiqingNum" style="color:#476da0;">{{yiqingList.jy.add}}</div>
      </div>
      <div class="yiqingcontent">
        <div class="yiqingName">新增无症状</div>
        <div class="yiqingNum" style="color:#e86d48;">{{yiqingList.extData.add}}</div>
      </div>
    </div>
    <div class="yiQing2">
      <div class="yiqingcontent">
        <div class="yiqingName">现有确诊</div>
        <div class="yiqingNum" style="color:#ff6a57;">{{yiqingList.qz.xy}}</div>
      </div>
      <div class="yiqingcontent">
        <div class="yiqingName">现有本土</div>
        <div class="yiqingNum" style="color:#ff6a57;">{{yiqingList.bt.total}}</div>
      </div>
      <div class="yiqingcontent">
        <div class="yiqingName">现有境外</div>
        <div class="yiqingNum" style="color:#476da0;">{{yiqingList.jy.xy}}</div>
      </div>
      <div class="yiqingcontent">
        <div class="yiqingName">现有无症状</div>
        <div class="yiqingNum" style="color:#e86d48;">{{yiqingList.extData.total}}</div>
      </div>
    </div>
    <div class="yiQing">
      <div class="yiqingcontent">
        <div class="yiqingName">累计确诊</div>
        <div class="yiqingNum" style="color:#B10000;">{{yiqingList.qz.total}}</div>
        <div class="yiqingPre">较昨日<span class="yipingPreNUme">+{{yiqingList.qz.add}}</span></div>
      </div>
      <div class="yiqingcontent">
        <div class="yiqingName">累计境外</div>
        <div class="yiqingNum" style="color:#FE6B22;">{{yiqingList.jy.total}}</div>
        <div class="yiqingPre">较昨日<span class="yipingPreNUme">+{{yiqingList.jy.add}}</span></div>
      </div>
      <div class="yiqingcontent">
        <div class="yiqingName">累计治愈</div>
        <div class="yiqingNum" style="color:#13B593;">{{yiqingList.zy.total}}</div>
        <div class="yiqingPre">较昨日<span class="yipingPreNUme">+{{yiqingList.zy.add}}</span></div>
      </div>
      <div class="yiqingcontent">
        <div class="yiqingName">累计死亡</div>
        <div class="yiqingNum" style="color:#666666;">{{yiqingList.sw.total}}</div>
        <div class="yiqingPre">较昨日<span class="yipingPreNUme">+{{yiqingList.sw.add}}</span></div>
      </div>
    </div>
    <div class="name">疫情速报</div>
    <div class="yiqingTime">该数据为31省(自治区、直辖市)本土新增，及港澳台新增确诊数据</div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      :default-sort="{prop:'add',order:'descending'}"
      :header-row-class-name="'rowclass'"
      :row-class-name="'rowclass'"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="name"
        label="地区">
      </el-table-column>
      <el-table-column
        prop="add"
        label="新增"
        sortable
        align="center"
        width="140">
      </el-table-column>
      <el-table-column
        prop="lj"
        label="累计"
        sortable
        align="center"
        width="140">
      </el-table-column>
      <el-table-column
        prop="zy"
        align="center"
        width="140"
        sortable
        label="治愈">
      </el-table-column>
      <el-table-column
        prop="sw"
        align="center"
        width="140"
        sortable
        label="死亡">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props:{
    yiqingList:{
      type:Object,
      default:function(){
        return {}
      }
    },
    tableData:{
      type:Array,
      default:function(){
        return []
      }
    }
  },
  data(){
    return{

    }
  }
}
</script>
<style scoped>
.yiqing{
  width: 728px;
  padding: 20px;
}
.name{
  font-weight: bold;
  font-size: 16px;
}
.yiqingTime{
  padding-top: 8px;
  color: #9195a3;
	font-size: 13px;
}
.yiQing1{
	background-color: white;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 30px;
  margin-top: 15px;
}
.yiQing2{
	background-color: white;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
  border-bottom:1px solid #eee;
	padding: 15px 30px;
}
.yiQing{
  margin-top: 15px;
	height: 80px;
	background-color: white;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 30px 15px 30px;
}
.yiqingcontent{
	width: 130px;
}
.yiqingname{
	padding:0 30px 0 20px ;
	height: 35px;
	display: flex;
	background-color: white;
	justify-content: space-between;
	font-size: 14px;
	align-items: center;
}
.yiqingTime{
	color: #9195a3;
	font-size: 13px;
}
.yiqingName{
	text-align: center;
	color: #393939;
  font-size: 13px;
}
.yiqingNum{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 35px;
	font-size: 24px;
	font-weight: bold;
}
.yiqingPre{
	text-align: center;
	color: #999;
  font-size: 13px;
}
.yipingPreNUme{
	color: #666666;
	font-weight: bold;
}
</style>